-
Notifications
You must be signed in to change notification settings - Fork 465
♿(frontend) add skip to content button for keyboard accessibility #1624
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
Size Change: -56 B (0%) Total Size: 4.07 MB
|
ddf3bdd to
46a87ac
Compare
46a87ac to
6cf81b3
Compare
6cf81b3 to
7bd9674
Compare
7bd9674 to
7311d97
Compare
add SkipToContent component to meet RGAA skiplink requirement Signed-off-by: Cyril <[email protected]>
ensures skiplink behavior is tested and stabilizes a failing accessibility test Signed-off-by: Cyril <[email protected]>
7311d97 to
470b4cb
Compare
c4acc55 to
6dc9a6b
Compare
| data-testid="header-logo-link" | ||
| aria-label={t('Back to homepage')} | ||
| <> | ||
| <SkipToContent /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess it should be in HomeHeader as well, no?
| style={{ | ||
| opacity: isVisible ? 1 : 0, | ||
| pointerEvents: isVisible ? 'auto' : 'none', | ||
| transition: 'opacity 0.3s ease-in-out', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Button has already a transition.
| position: 'fixed', | ||
| top: 'var(--c--theme--spacings--2xs)', | ||
| // padding header + logo(32px) + gap(3xs≈4px) + text "Docs"(≈70px) + 12px | ||
| left: 'calc(var(--c--theme--spacings--base) + 32px + var(--c--theme--spacings--3xs) + 70px + 12px)', | ||
| zIndex: 9999, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's do like that, but yes I am not huge fond of this part.
Purpose
Introduce a keyboard-accessible skip link to improve navigation and comply with RGAA.
issue 1621
skiplinkpages_Yk5ZTCDR.mp4
Proposal
SkipToContentcomponent